<template>
  <div ref="editor"></div>
  <button @click="syncHTML">同步内容</button>
  <div :innerHTML="content.html"></div>
</template>

<script>
import { onMounted, onBeforeUnmount, ref, reactive,watch } from "vue";
import WangEditor from "wangeditor";
export default {
  name: "app",
  props:{
      contentHtml:String
  },
  setup(prop, { emit }) {

       

    const editor = ref();
    const content = reactive({
      html: "",
      text: "",
    });
    
    let instance;
    onMounted(() => {
       
      instance = new WangEditor(editor.value);
      // 设置编辑区域高度为 500px
      instance.config.height = 200;
      instance.txt.html(prop.contentHtml) ;
      Object.assign(instance.config, {
        onchange() {
          emit("setRemark", instance.txt.html());
          //console.info(instance.txt.html());
        },
      });
      instance.create();
    });

        watch(
        () => prop.contentHtml,
        (c, pc) => {
           instance.txt.html(c) ;
        }
        )

    onBeforeUnmount(() => {
      instance.destroy();
      instance = null;
    });
    const syncHTML = () => {
      content.html = instance.txt.html();
    };
    return {
      syncHTML,
      editor,
      content,
    };
  },
};
</script>